<template>
  <div class="container">
    <div class="m-header" id="m-header">
      <div @click="goback" class="m-return" id="m-return"></div>
      {{trandeLineWordDetials.word}}(<span v-if="trandeLineWordDetials.quality==4">紫色</span><span
            v-if="trandeLineWordDetials.quality==3">蓝色</span><span
            v-if="trandeLineWordDetials.quality==2">绿色</span><span v-if="trandeLineWordDetials.quality==1">白色</span>)
    </div>
    <div class="list-item flex-row flex-y-center">
      <div class="font-box flex-grow-0 flex-y-center flex-x-center"
           :class="[{zise:trandeLineWordDetials.quality==4},{blue:trandeLineWordDetials.quality==3},{green:trandeLineWordDetials.quality==2},{white:trandeLineWordDetials.quality==1}]">
        {{trandeLineWordDetials.word}}
      </div>
      <div class="desc flex-grow-0">
        <p>当前最低价:￥{{wordDetails.min_money}}</p>
        <p>今日标准价:￥{{wordDetails.standard_price}}</p>
        <p>昨日标准价￥{{wordDetails.yesterday_money}}</p>
      </div>
      <div class="imgBox flex-grow-0">
        <div class="" style="">
          <img v-if="trandeLineWordDetials.gain>0" style="width: 0.28rem" v-src="'/static/image/shangshen_icon@2x.png'">

          <img v-else style="width: 0.28rem" v-src="'/static/image/down.png'">
        </div>
      </div>
      <div class="rightbox flex-grow-1 flex-right">
        <div class="shoucanbox">
          <img v-if="trandeLineWordDetials.follow==0" style="width: 0.46rem"
               v-src="'/static/image/shoucang_icon@2x.png'" alt="">
          <img v-if="trandeLineWordDetials.follow==1" style="width: 0.46rem" v-src="'/static/image/shoucangok@2x.png'"
               alt="">
          <img style="width: 0.46rem;margin-left: 0.25rem" v-src="'/static/image/shuaxin_icon@2x.png'" alt="">
        </div>
      </div>
    </div>
    <div class="market">
      <div class="title">本期行情</div>
      <!-- 走势图 -->
      <div class="trend-chart">
        <ve-line :data="chartData"></ve-line>
      </div>
    </div>

    <div class="for-sale">
      <div class="In-selling">
        在售
      </div>
      <div class="information-sheet clearfix">
        <div class="price">
          <div class="">价格</div>
          <div class="">数量</div>
        </div>
        <div class="price" v-for="(item,index) in onSale">
          <div>
            ￥<span>{{item.money}}</span>
          </div>
          <div>{{item.number}}</div>
        </div>

      </div>
    </div>
    <div class="Buy-to-sell">
      <button @click="buybtn" class="buy">购买</button>
      <button @click="sellBtn" class="show-off" :class="user_number?'':'disabled'">出售</button>
    </div>

    <!--购买弹框-->
    <div v-if="showBuy==true || showSell==true || showConfirmBuy==true" class="black_overlay"></div>
    <div v-if="showBuy" class="white_content">
      <!-- 弹框内容 -->
      <div class="quantity">
        <div class="possess flex-row">
          <div class="font-box zise flex-grow-0 flex-y-center flex-x-center">
            焱
          </div>
          <div class="text-desc flex-y-bottom">在售:{{wordDetails.number}}</div>
        </div>
      </div>

      <div class="subtract flex-row">
        <div @click="buy_click_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox flex-grow-0 flex-y-center">
          <div @click="buy_click_jian" class="left-jian commen flex-grow-0 flex-x-center flex-y-center">
            -
          </div>
          <div class="number-one">
            {{buyCount}}
          </div>
          <div @click="buy_click_jia" class="right-jia commen flex-grow-0 flex-x-center flex-y-center">
            +
          </div>
        </div>
        <div @click="buy_click_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="putaway-two">固定从最低价购买</div>
      <!--<div class="predict">预计需要:￥<span class="red">23.75</span></div>-->
      <div class="average flex-grow-0 flex-y-center flex-x-center" @click="user_buy">购买</div>

      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>

    </div>
    <!--确定购买文字弹框-->
    <div v-if="showConfirmBuy" class="white_content">
      <!-- 弹框内容 -->
      <div class="quantity">
        <div class="possess flex-row">
          <div class="font-box zise flex-grow-0 flex-y-center flex-x-center">
            焱
          </div>
          <div class="text-desc flex-y-bottom">拥有:{{wordDetails.number}}</div>
        </div>
      </div>
      <div style="font-size: 0.28rem" class="subtract flex-row flex-x-center">您购买的个数{{buyCount}}个</div>
      <div style="font-size: 0.28rem" class="putaway-two">您购买的价格是<span class="red">{{confirmPrice}}元</span></div>
      <!--<div class="predict">预计需要:￥<span class="red">23.75</span></div>-->
      <div class="average flex-grow-0 flex-y-center flex-x-center" @click="user_confirm_buy">确定购买</div>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>

    </div>

    <!--出售弹框-->
    <div v-if="showSell" class="white_content white_content2">
      <!-- 弹框内容 -->
      <div class="quantity">
        <div class="possess flex-row">
          <div class="font-box flex-grow-0 flex-y-center flex-x-center"
               :class="[{zise:trandeLineWordDetials.quality==4},{blue:trandeLineWordDetials.quality==3},{green:trandeLineWordDetials.quality==2},{white:trandeLineWordDetials.quality==1}]">
            {{trandeLineWordDetials.word}}
          </div>
          <div class="text-desc flex-y-bottom">拥有:{{user_number?user_number:0}}</div>
        </div>
      </div>

      <div class="subtract flex-row">
        <div @click="sale_click_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox flex-grow-0 flex-y-center">
          <div @click="sale_click_jian" class="left-jian commen flex-grow-0 flex-x-center flex-y-center">
            -
          </div>
          <div class="number-one">
            {{saleCount}}
          </div>
          <div @click="sale_click_jia" class="right-jia commen flex-grow-0 flex-x-center flex-y-center">
            +
          </div>
        </div>
        <div @click="sale_click_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="subtract2 flex-row">
        <div @click="salePrice_zui_xiao" class="minimum  flex-grow-0 flex-x-center flex-y-center">
          最小
        </div>
        <div class="countbox2 flex-grow-0 flex-y-center">
          <div @click="salePrice_jian" class="left-jian2 commen2 flex-grow-0 flex-x-center flex-y-center">
            -5%
          </div>
          <div class="number-one2">
            {{salePrice | getCount}}
          </div>
          <div @click="salePrice_jia" class="right-jia2 commen2 flex-grow-0 flex-x-center flex-y-center">
            +5%
          </div>
        </div>
        <div @click="salePrice_zui_da" class="maximum flex-grow-0 flex-x-center flex-y-center">
          最大
        </div>
      </div>

      <div class="timeTitle">上架时间</div>

      <div class="chooseTimBeox flex-row">
        <div class="time flex-x-center flex-y-center" @click="timeChoose(index)"
             :class="{'active':index == currentTimeIndex}" v-for="(item,index) in timeList">{{item}}小时
        </div>
        <!--<div class="time active flex-x-center flex-y-center">12小时</div>-->
        <!--<div class="time timeCenter flex-x-center flex-y-center">24小时</div>-->
        <!--<div class="time flex-x-center flex-y-center">48小时</div>-->
      </div>

      <div class="average flex-grow-0 flex-y-center flex-x-center" @click="user_sale">出售</div>
      <p class="selldesc">注：出售价格只能为当日标准价格+/-25%
        出售成功后，平台会收取5%手续费</p>
      <div @click="cancleClick" class="cancel flex-grow-0 flex-y-center flex-x-center">
        ×
      </div>
    </div>

  </div>
</template>

<script>
  import {WORDDETIALS, USER_BUY, USER_SALE, USER_CONFIRM_BUY} from 'src/const/uri'
  import MDUtils from 'src/assets/js/md-utils'
  import {bodyScroll} from "src/assets/js/md-utils";

  export default {
    name: "Details",
    data() {
      return {
        showBuy: false,
        showSell: false,
        showConfirmBuy: false,
        timeList: [12, 24, 48],
        currentTimeIndex: 0,
        onSale: [],
        wordDetails: {},
        trandeLineWordDetials: {},
        user_number: '',
        buyCount: 1,
        confirmPrice: '',
        saleCount: 1,
        salePrice: '',
        chartData: {
          columns: ['日期', '余额', '比率'],
          rows: [
            {'日期': '1月1日', '余额': 123,  '比率': 0.3},
            {'日期': '1月2日', '余额': 1223, '比率': 0.6},
            {'日期': '1月3日', '余额': 2123, '比率': 0.9},
            {'日期': '1月4日', '余额': 4123, '比率': 0.12},
            {'日期': '1月5日', '余额': 3123, '比率': 0.15},
            {'日期': '1月6日', '余额': 7123, '比率': 0.20}
          ]
        }
      }
    },
    mounted() {
      this.initData();
      this.trandeLineWordDetials = JSON.parse(window.sessionStorage.getItem('zm_wordDetails'));
      console.log(this.trandeLineWordDetials);
    },
    methods: {
      initData() {
        this.$ajax.get(WORDDETIALS, {
          word_id: MDUtils.getQueryParam('id')
        }).then(res => {
          console.log(res);
          this.onSale = res.data.on_sale;
          this.user_number = res.data.user_number;
          this.wordDetails = res.data.word_details;
          this.salePrice = res.data.word_details.standard_price;
          // this.chartData = res.data.quotation;
          console.log(this.wordDetails);
        });
      },
      user_buy() {

        this.$ajax.post(USER_BUY, {
          word_id: MDUtils.getQueryParam('id'),
          number: this.buyCount,
        }).then(res => {
          this.confirmPrice = res.data;
          this.showConfirmBuy = true;
          this.showBuy=false;
        })
      },
      user_confirm_buy() {
        this.$ajax.post(USER_CONFIRM_BUY, {
          word_id: MDUtils.getQueryParam('id'),
          number: this.buyCount,
          z_money: this.confirmPrice
        }).then(res => {
          this.showConfirmBuy=false;

          if(res.code==0){
            this.$vux.alert.show({
              content:res.msg,
              onHide () {
                window.history.go(0)

              }
            });
          }else {
            this.$vux.alert.show({
              content:res.msg,
              onHide () {
                window.history.go(0)
              }
            });
          }
        })
      },
      user_sale() {
        // console.log(this.saleCount);
        // console.log(this.salePrice);
        // console.log(this.timeList[this.currentTimeIndex]);
        this.$ajax.post(USER_SALE,{
          font_id: MDUtils.getQueryParam('id'),
          number: this.saleCount,
          money: parseFloat(this.salePrice).toFixed(2),
          duration: this.timeList[this.currentTimeIndex]
        }).then(res => {
          if(res.code==1){
            this.showSell = false;
            this.$vux.alert.show({
              content: '恭喜您出售成功',
              onHide() {
                window.history.go(-1)
              }
            });
          }else if(res.code==0){
            this.$vux.toast.text(res.msg)
          }
        });
      },

      buybtn() {
        this.showBuy = true;
        bodyScroll.stop();
      },
      sellBtn() {
        if(this.user_number){
          this.showSell = true;
          bodyScroll.stop();
        }else {
          return false;
        }

      },
      cancleClick() {
        this.showBuy = false;
        this.showSell = false;
        this.showConfirmBuy = false;
        bodyScroll.move();
      },
      timeChoose(index) {
        this.currentTimeIndex = index;
      },
      buy_click_jian() {
        if (this.buyCount > 1) {
          this.buyCount--;
        } else {
          return false;
        }
      },
      buy_click_jia() {
        if (this.buyCount < this.wordDetails.number) {
          this.buyCount++;
        } else {
          return false;
        }
      },
      buy_click_zui_da() {
        this.buyCount = this.wordDetails.number;
      },
      buy_click_zui_xiao() {
        this.buyCount = 1;
      },
      sale_click_jian() {
        if (this.saleCount > 1) {
          this.saleCount--;
        } else {
          return false;
        }
      },
      sale_click_jia() {
        if (this.saleCount < this.user_number) {
          this.saleCount++;
        } else {
          return false;
        }
      },
      sale_click_zui_xiao() {
        this.saleCount = 1;
      },
      sale_click_zui_da() {
        this.saleCount = this.user_number;
      },
      salePrice_jian() {
        this.salePrice = this.salePrice * 0.95
      },
      salePrice_jia() {
        console.log(this.wordDetails.standard_price * 1.25);
        if (this.salePrice < this.wordDetails.standard_price * 1.25) {
          this.salePrice = this.salePrice * (1 + 0.05)
        }

      },
      salePrice_zui_xiao() {
        this.salePrice = this.wordDetails.standard_price * 0.75;
      },
      salePrice_zui_da() {
        // console.log(this.wordDetails.standard_price);
        // if(this.salePrice<this.wordDetails.standard_price*(1.25)){
        //
        // }
        this.salePrice = this.wordDetails.standard_price * 1.25;
      },
      goback() {
        window.history.go(-1)
      }
    }
  }
</script>
<style>
  body{
    background: #fff;
  }
</style>
<style scoped>
  @import "../style/details.css";
</style>
